<template>
	<view>
		<view class="banner" v-if="detailObj.order_status == 4">
			<view class="status">待出行</view>
			<view class="desc">请至少提前2小时到达机场，以免误机</view>
		</view>
		<view class="banner" v-if="detailObj.order_status == 1">
			<view class="status">待付款</view>
		</view>
		<view class="banner" v-if="detailObj.order_status == 3">
			<view class="status">待出票</view>
		</view>
		<view class="banner" v-if="detailObj.order_status == 5">
			<view class="status">已取消</view>
		</view>
		<view class="order-info">
			<view class="top">
				<view class="price">金额￥{{detailObj.total_amount}}</view>
				<view class="sn">
					<text class="order-sn">订单号: {{detailObj.order_sn}}</text>
				</view>
			</view>
			<view class="center">
				<view class="date">{{detailObj.dep_time}} {{detailObj.departure}} ---- {{detailObj.arrival}}</view>
				<view class="start-end">
					<view class="time">
						<text>{{startTime}}</text>
						<text style="color: #999999;font-size: 24rpx;font-weight: 400;">{{longTime}}</text>
						<text>{{endTime}}</text>
					</view>
					<view class="line">
						<view class="circle"></view>
						<view class="dash"></view>
						<view class="circle"></view>
					</view>
					<view class="address">
						<text>{{detailObj.departure_airport}}{{detailObj.dep_jetquay}}</text>
						<view class="zuowei">{{detailObj.flight_no}}
							{{detailObj.plane_cn_name}}（{{detailObj.plane_size==1?'大':detailObj.plane_size==2?'中':'小'}}）
						</view>
						<text>{{detailObj.arrival_airport}}{{detailObj.arr_jetquay}}</text>
					</view>
				</view>
			</view>

		</view>
		<view class="chuxing-info">
			<view class="title">出行信息</view>
			<view class="chuxing-row" v-for="(peo,index) in detailObj.passenger" :key='index'>
				<view class="label">出行人</view>
				<view class="value">
					<view>{{peo.id_name}}</view>
					<view style="margin-top: 10rpx;">舱位：{{peo.seat_msg}}</view>
					<view class="phone">联系手机：{{peo.mobile}}</view>
				</view>
			</view>
			<view class="chuxing-row">
				<view class="label">联系人</view>
				<view class="value">
					<!-- <view>{{detailObj.passenger[0].mobile}}</view> -->
				</view>
			</view>
		</view>
		<view class="btn-group">
			<view class="btn" v-if="detailObj.order_status == 1" @click="toPay(detailObj.pay_id)">去支付</view>
			<view class="btn" v-if="detailObj.order_status == 1 || detailObj.order_status == 3"
				@click="cancle(detailObj.order_id)">取消</view>
			<view class="btn" style="margin: 0;" v-if="detailObj.order_status == 5" @click="delect(detailObj.order_id)">
				删除</view>
		</view>
		<view class="reset">
			<view class="btn" @click="navTo">再次预定</view>
		</view>


		<u-popup v-model="showPay" mode="bottom" :closeable='true' border-radius='16'>
			<view class="payPop">
				<view class="title">
					选择支付方式
				</view>
				<view class="pay-ul">
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/weixinzf.png" mode=""></image>
							<text>微信</text>
						</view>
						<u-checkbox v-model="weiPaycheck" shape="circle" @change="weiChange" size="30"></u-checkbox>
					</view>
					<view class="pay-li">
						<view class="pay-li-left">
							<image src="../../../static/imgs/zhifubaozf.png" mode=""></image>
							<text>支付宝</text>
						</view>
						<u-checkbox v-model="alPaycheck" shape="circle" @change="aliChange" size="30"></u-checkbox>
					</view>
				</view>
				<view class="pay" @click="confirmPay">
					支付
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import myRequest from '@/api/index.js'
	import utils from '@/common/utils.js'
	export default {
		data() {
			return {
				weiPaycheck: false,
				alPaycheck: false,
				showPay: false,
				orderId: '',
				detailObj: {},
				startTime: '',
				endTime: '',
				longTime: '',
				payId: '',
				payCode: ''
			};
		},
		onLoad(option) {
			this.orderId = option.id
			this.getDetail()
		},
		methods: {
			cancle(id) {
				let that = this
				uni.showModal({
					content: '是否取消该订单',
					success: function(res) {
						if (res.confirm) {
							that.cancleFn(id)
						}
					}
				})
			},
			delect(id) {
				let that = this
				uni.showModal({
					content: '是否删除该订单',
					success: function(res) {
						if (res.confirm) {
							that.delectFn(id)
						}
					}
				})
			},
			// 取消
			async cancleFn(orderId) {
				let res = await myRequest.celAirOrder({
					page: this.page,
					order_id: orderId
				})
				if (res.status) {
					uni.showToast({
						title: '已取消该订单',
						icon: 'none'
					})
					uni.navigateTo({
						url: './planeOrder'
					})
				}
			},
			// 删除
			async delectFn(orderId) {
				let res = await myRequest.delAirOrder({
					page: this.page,
					order_id: orderId
				})
				if (res.status) {
					uni.showToast({
						title: '已取消该订单',
						icon: 'none'
					})
					uni.navigateTo({
						url: './planeOrder'
					})
				}
			},
			// 支付
			toPay(id) {
				this.payId = id
				this.showPay = true
			},
			confirmPay() {
				uni.navigateTo({
					url: '../pay/pay?payCode=' + this.payCode + '&payId=' + this.payId
				})
			},
			weiChange(e) {
				if (e.value) {
					this.alPaycheck = false
					this.payCode = '6004'
				}
			},
			aliChange(e) {
				if (e.value) {
					this.weiPaycheck = false
					this.payCode = '6005'
				}
			},
			// 详情
			async getDetail() {
				let {
					orderId
				} = this
				let res = await myRequest.airOrderDetail({
					page: '1',
					order_id: orderId
				})
				if (res.status) {
					this.detailObj = res.data
					this.startTime = utils.formatDate(res.data.dep_time, 'hh:mm')
					this.endTime = utils.formatDate(res.data.arr_time, 'hh:mm')
					let long = utils.countDown(res.data.dep_time, res.data.arr_time)
					this.longTime = long[1] + '时' + long[2] + '分'
				}
			},
			navTo() {
				uni.navigateTo({
					url: './planeTicket'
				})
			}
		}
	}
</script>

<style lang="scss">
	.banner {
		background-color: #3894F8;
		height: 200rpx;
		color: #FFFFFF;
		padding: 40rpx;

		.status {
			font-size: 34rpx;
		}

		.desc {
			font-size: 28rpx;
			margin-top: 20rpx;
		}
	}

	.order-info {
		background-color: #FFFFFF;

		.top {
			padding: 40rpx;
			border-bottom: 2rpx solid #F2F2F7;

			.price {
				font-size: 34rpx;
				color: #3587F7;
			}

			.sn {
				display: flex;
				align-items: center;
				justify-content: space-between;
				margin-top: 10rpx;
				color: #999999;
				font-size: 24rpx;

				.zhengce {
					color: #3587F7;
				}
			}
		}

		.center {
			padding: 40rpx;

			.date {
				font-size: 32rpx;
				font-weight: bold;
				color: #333333;
			}

			.start-end {
				width: 100%;
				display: flex;
				align-items: center;
				justify-content: flex-start;
				height: 260rpx;

				.time {
					width: 18%;
					height: 100%;
					display: flex;
					// align-items: center;
					justify-content: space-around;
					flex-direction: column;
					color: #333333;
					font-size: 28rpx;
					font-weight: bolder;
					
				}

				.line {
					width: 10%;
					height: 100%;
					display: flex;
					align-items: center;
					justify-content: center;
					flex-direction: column;

					.circle {
						background-color: #8C9FBF;
						width: 20rpx;
						height: 20rpx;
						border-radius: 50%;
					}

					.dash {
						width: 12rpx;
						height: calc(100% - 100rpx);
						background-color: #8C9FBF;
						margin: -4rpx auto;
					}
				}

				.address {
					width: 75%;
					height: 100%;
					display: flex;
					align-items: flex-start;
					justify-content: space-around;
					flex-direction: column;
					color: #333333;
					font-size: 28rpx;
					font-weight: bolder;

					.zuowei {
						color: #8C9FBF;
						font-size: 24rpx;
						background: #F9FAFC;
						width: 100%;
						height: 60rpx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
				}
			}
		}
	}

	.chuxing-info {
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 0 40rpx;

		.title {
			font-size: 32rpx;
			font-weight: bold;
			color: #333333;
			padding: 20rpx 0;
			border-bottom: 2rpx solid #F2F2F7;
		}

		.chuxing-row {
			width: 100%;
			padding: 20rpx 0;
			display: flex;
			align-items: center;
			border-bottom: 2rpx solid #F2F2F7;

			.label {
				color: #999999;
				width: 150rpx;
			}

			.value {
				font-size: 30rpx;
				font-weight: 400;
				color: #333333;
				margin-left: 20rpx;
			}
		}
	}

	.btn-group {
		display: flex;
		align-items: center;
		justify-content: flex-end;
		width: 100%;
		margin-top: 20rpx;
		background-color: #FFFFFF;
		padding: 20rpx 40rpx;

		.btn {
			border: 2rpx solid #3587F7;
			color: #3587F7;
			padding: 10rpx;
			border-radius: 10rpx;
			margin-right: 20rpx;
			font-size: 24rpx;
		}
	}

	.reset {
		padding: 40rpx;

		.btn {
			width: 100%;
			background: linear-gradient(180deg, #6A9FF8 0%, #2D7AFE 100%);
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #FFFFFF;
			font-size: 30rpx;
			border-radius: 10rpx;
		}
	}

	.payPop {
		padding-bottom: 20rpx;

		.title {
			width: 375px;
			height: 100rpx;
			line-height: 100rpx;
			text-align: center;
		}

		.pay-ul {

			.pay-li {
				width: 694rpx;
				height: 100rpx;
				background: #FFFFFF;
				margin: 0 auto;
				display: flex;
				align-items: center;
				justify-content: space-between;

				.pay-li-left {
					display: flex;
					align-items: center;

					image {
						width: 44rpx;
						height: 44rpx;
					}

					text {
						font-size: 32rpx;
						font-family: Alibaba Sans;
						font-weight: 400;
						color: #333333;
						margin-left: 20rpx;
					}
				}

			}
		}

		.pay {
			width: 694rpx;
			height: 88rpx;
			background: linear-gradient(56deg, #FEA837 0%, #FF7700 100%);
			margin: 0 auto;
			border-radius: 8rpx;
			font-size: 40rpx;
			font-family: Arial;
			font-weight: 400;
			color: #FFFFFF;
			line-height: 88rpx;
			text-align: center;
			margin-top: 40rpx;
		}
	}
</style>
